<template>
  <div class="table">
    <div class="top">
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>作业码头：</span>
        </div>
        <el-select v-model="form.termCode" @change="$emit('setTerm',form.termCode)" placeholder="搜索查询更多" clearable
          filterable size="small" style="width:200px">
          <el-option :label="item.cnName" :value="item.termCode" v-for="item,index in dataList.termList"
            :key="index"></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>箱号：</span>
        </div>
        <el-input v-model="form.cntrNo" placeholder="请输入" size="small" style="width:200px">
        </el-input>
      </div>
      <div class="item">
        <el-button type="primary" class="search" @click="getDate">查询</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" @selection-change="handleSelectionchangeS"
        :header-cell-style="{ background: '#EEF1F5'}" style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="cntrno" label="箱号" min-width="180">
        </el-table-column>
        <el-table-column prop="ctypecd" label="船公司箱型" min-width="180">
        </el-table-column>
        <el-table-column prop="cstCoperName" label="持箱人" min-width="220">
          <template slot-scope="scope">
            {{ (scope.row.cstCopercd || '') + '/' + (scope.row.cstCoperName || '') }}
          </template>
        </el-table-column>
        <el-table-column prop="cstOwnercd" label="箱控公司" width="180">
        </el-table-column>
        <el-table-column prop="internalfg" label="贸易类型" min-width="180">
          <template slot-scope="scope">
            <span v-if="'Y'===scope.row.internalfg">内贸</span>
            <span v-if="'N'===scope.row.internalfg">外贸</span>
          </template>
        </el-table-column>
        <el-table-column prop="dirtyName" label="坏/污" min-width="180">
        </el-table-column>
        <!-- <el-table-column prop="termName"
                         label="作业码头"
                         width="180">
        </el-table-column>
        <el-table-column prop="workzone"
                         label="码头作业区"
                         width="180">
        </el-table-column> -->
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: 'boxNumTable',
  components: {},
  data() {
    return {
      selection:[],
      dataList:{
        termList:[]
      },
      form: {
        planTag:'PE_WC'
      },
      oriForm: {
        planTag:'PE_WC'
      },
      tableData: [],
    }
  },
  watch:{
    form(){
      this.$forceUpdate()
    }
  },
  created(){
    this.term()
  },
  methods: {
    term(){
      this.$api.term().then(res => {
						this.dataList.termList = res.data.data
					})
    },
    handleSelectionchangeS(val) {
      this.selection = val;
      //this.$refs.table.toggleRowSelection(val, true);
    },
    getDate(){
      console.log(88888)
      if(!this.form.termCode){
        this.$message.error('请选择码头')
        return
      }
      if(!this.form.cntrNo){
        this.$message.error('请输入箱号')
        return
      }
      this.$emit('set',this.form.termCode)
      this.$api.tosGetContainer(this.form).then(res=>{
        this.tableData=res.data
      }).catch(res=>{
        this.tableData=[]
      })
      
    }
  },

  computed: {},

  mounted() {},
}
</script>
<style lang='less' scoped>
.table {
  background: #fff;

  .top {
    padding: 20px;
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    display: flex;

    .item {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .label {
        margin-right: 5px;

        span:first-child {
          color: #ff3838;
        }
      }
    }

    .search {
      background: #0f47b8;
      height: 30px;
      padding: 5px 10px;
    }
  }

  .table {
    padding: 20px;
  }
}
</style>